
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--允许全屏-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="apple-touch-icon" href="favicon.png">
    <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">
    <title>再来一波DEMO页</title>
    <style>
        html,body{
            height:100vh;
            background-color:#ee0a3b;
        }
        .item-section{
            min-height:100%;
            background-color:#ee0a3b;
            position:relative;
            font-size:12px
        }[data-dpr="2"]
        .item-section{font-size:24px}[data-dpr="3"] .item-section{font-size:36px}.item-section_header{text-align:center}.item-section_header img{width:10rem}.item-section ul{padding:.133333rem}.flag{display:table;width:100%;margin-bottom:1px;background-color:#fff}.flag .flag-item{display:table-cell;padding:.16rem 0;vertical-align:top;background-color:#fff}.flag .flag-item.figcaption{width:133.333333rem;padding-left:.2rem;padding-right:.2rem;position:relative}.flag .flag-item.figure{width:2.4rem;height:2.4rem}.flag .flag-item img{width:2.4rem;height:2.4rem;vertical-align:top}.flag .flag-title a{color:#333;line-height:1.25;overflow:hidden;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;box-orient:vertical;display:-webkit-box;display:box}.flag .flag-price{padding:.15rem 0 .2rem}.flag .flag-price span{display:inline-block;background-color:#ee0a3b;vertical-align:middle;border-radius:.026667rem;padding:.026667rem .08rem .013333rem;color:#fff;font-weight:700;margin-right:.066667rem;font-size:11px}[data-dpr="2"] .flag .flag-price span{font-size:22px}[data-dpr="3"] .flag .flag-price span{font-size:33px}.flag .flag-price strong{display:inline-block;vertical-align:middle;font-weight:700;color:#ee0a3b;font-size:16px;margin-right:.16rem}[data-dpr="2"] .flag .flag-price strong{font-size:32px}[data-dpr="3"] .flag .flag-price strong{font-size:48px}.flag .flag-price small{display:inline-block;vertical-align:middle;font-weight:700;color:#ee0a3b;font-size:12px}[data-dpr="2"] .flag .flag-price small{font-size:24px}[data-dpr="3"] .flag .flag-price small{font-size:36px}.flag .flag-type{color:#ff3600}.flag .flag-btn{position:absolute;width:2.133333rem;height:.64rem;line-height:.64rem;background-color:#ee0a3b;text-align:center;color:#fff;font-weight:700;font-size:14px;bottom:.133333rem;right:.2rem;border-radius:.026667rem}[data-dpr="2"] .flag .flag-btn{font-size:28px}[data-dpr="3"] .flag .flag-btn{font-size:42px}</style>
    <script src="//g.alicdn.com/mtb/lib-aa/0.0.33/??aa.js,dirty.js"></script>
<!--    <style>-->
<!--        html,body{-->
<!--            height: 100vh;-->
<!--            background-color: #ee0a3b;-->
<!--        }-->
<!--    </style>-->
    <meta content="a1z3i" name="data-spm">
    <meta content="20140614.a1z3i.meyxt9ed" name="data-scm">
</head>
<body data-spm="meyxt9ed">
<!-- Item Header Template -->
<div class="html_content">
    <div class="item-section" data-repeat="sections">
        <div class="item-section_header">
            <h2><img src="{brannerImag}" alt=""></h2>
        </div>
        <ul>
            <li data-repeat="items" class="flag" role="link" href="{itemLink}"> <a class="figure flag-item" href="{itemLink}"> <img src="{imgSrc}" alt=""> </a>
                <div class="figcaption flag-item">
                    <div class="flag-title">
                        <a href="{itemLink}" title="">{poductName}</a>
                    </div>
                    <div class="flag-price">
                        <span>双11价</span>
                        <strong>¥{price}</strong>
                        <small>({preferential})</small>
                    </div>
                    <div class="flag-type">
                        {activityType}
                    </div>
                    <a class="flag-btn" href="{shopLink}">{activeName}</a>
                </div> </li>
        </ul>
    </div>
</div>
<script>
    //define module function
    (function(win){
        var module = function( data ,dom ){
            this.data = data ;
            this.dom = dom
        }
        module.prototype.init = function(){
            //var itemList = this.dom.querySelector(".item-section");
            this.dom.setData(this.data
            )
        }
        win.itemModule = module;
    }(window));

    //define data
    var pageData = {
        sections:[{
            "brannerImag":"http://gw.alicdn.com/mt/TB1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg",
            items:[{
                "itemLink": "##",
                "imgSrc": "https://placeimg.com/350/350/people/grayscale",
                "poductName":"Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093",
                "price": "299.06",
                "preferential": "满400减100",
                "activityType": "1小时内热卖5885件",
                "shopLink":"##",
                "activeName": "马上抢！"
            },{
                "itemLink": "##",
                "imgSrc": "https://placeimg.com/350/350/people/grayscale",
                "poductName":"Nike耐克官方ZOOM KOBE VENOMENON 5 EP 科比男子篮球鞋815757",
                "price": "699.50",
                "preferential": "满300减150",
                "activityType": "6744人正在疯抢",
                "shopLink":"##",
                "activeName": "马上抢！"
            },{
                "itemLink": "##",
                "imgSrc": "https://placeimg.com/350/350/people/grayscale",
                "poductName":"现货【送皮套+钢膜+耳机】Xiaomi/小米 红米Note2手机note2",
                "price": "799.00",
                "preferential": "满300减150",
                "activityType": "7833人正在疯抢",
                "shopLink":"##",
                "activeName": "马上抢！"
            },{
                "itemLink": "##",
                "imgSrc": "https://placeimg.com/350/350/people/grayscale",
                "poductName":"ONLY2015秋装新品七分袖弹力修身针织衫女",
                "price": "299.00",
                "preferential": "满300减100",
                "activityType": "2379人想买",
                "shopLink":"##",
                "activeName": "马上抢！"
            },{
                "itemLink": "##",
                "imgSrc": "https://placeimg.com/350/350/people/grayscale",
                "poductName":"Levi's李维斯513春季男士修身直筒牛仔裤长裤",
                "price": "399.00",
                "preferential": "满300减100",
                "activityType": "预热期加购TOP1",
                "shopLink":"##",
                "activeName": "马上抢！"
            },{
                "itemLink": "##",
                "imgSrc": "https://placeimg.com/350/350/people/grayscale",
                "poductName":"Levi's李维斯513春季男士修身直筒牛仔裤长裤",
                "price": "399.00",
                "preferential": "满300减100",
                "activityType": "预热期加购TOP1",
                "shopLink":"##",
                "activeName": "马上抢！"
            }]
        }]

    }

    //render
    var renderDom = document.querySelector(".html_content");
    var module = new itemModule(pageData , renderDom);
    module.init();
    // var renderDom = document.querySelector(".html_content")
    // var module = new itemModule(pageData,renderDom)
    // module.init();

</script>
<script src="//g.alicdn.com/alilog/??wlog/0.2.7/aplus_wap.js,wlog/0.2.7/spm_wap.js,wlog/0.2.7/spmact_wap.js"></script>
</body>
</html>